<template>
    <p style="text-align: left;padding-left: 1.8vw;font-size: 3.5vw">{{ businessInfo.businessName }}</p>
  <!-- 订单明细部分 -->
    <ul class="order-detailed">
        <template v-for="item in cartData">
            <li>
                <div class="order-detailed-left">
                    <img :src="item.food.foodImg">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                </div>
                <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
        </template>
    </ul>
    <div class="order-deliveryfee">
        <p>配送费</p>
        <p>&#165;{{businessInfo.deliveryPrice}}</p>
    </div>
</template>

<script setup>
import {getBusinessByBusinessIdAPI} from "../api/api.js";
import {ref,onMounted} from "vue";
import {useCartStore} from "../store/cart.js";

const emit = defineEmits(["getPrice"])
const cartStore = useCartStore()
const {cartData,businessId,totalPrice} = cartStore.cartInfo
const businessInfo = ref({})

onMounted(async ()=>{
    await getBusinessByBusinessIdAPI(businessId).then(res=> {
        businessInfo.value = res.data.data
        emit("getPrice",{
            totalPrice: totalPrice+businessInfo.value.deliveryPrice,
            businessId: businessId
        })
    })
})
</script>

<style scoped>
/****************** 订单明细部分 ******************/
.order-detailed{
    width: 100%;
}
.order-detailed li{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-detailed li .order-detailed-left{
    display: flex;
    align-items: center;
}
.order-detailed li .order-detailed-left img{
    width: 10vw;
    height: 10vw;
}
.order-detailed li .order-detailed-left p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.order-detailed li p{
    font-size: 3.5vw;
}
.order-deliveryfee{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}
</style>